import React, { Component } from 'react'
import styles from "./Topic.module.scss"
import axios from "axios"
// import axios from "../../utils/axios"

export default class Topic extends Component {
  state = {
    navArr: [],
    swiper_list: [],
    nav_title: [],
    viceTitle: [],

    pro_list: [],
    newArrList: [],

    long: 0,
    page: 1,
  }


  componentDidMount() {
    axios.get("/topic/v1/know/navWap.json").then(res => {
      let data = res.data.data.navList.map((v, i) => ({
        icon: v.picUrl,
        text: v.mainTitle,
        id: i,
        columnUrl: v.columnUrl,
        viceTitle: v.viceTitle,
      }))
      this.setState({
        swiper_list: data,
        navArr: res.data.data.navList
      })
    })

    // ----pro----------
    axios.get("/topic/v1/find/recAuto.json?page=" + this.state.page + "&size=5&exceptIds=").then(res => {
      // console.log(res)
      if (res.data.data) {
        var new_pro_list = []
        res.data.data.result.forEach((v, i) => {
          v.topics.forEach((v, i) => {
            new_pro_list.push(v)
          })
          // console.log(new_pro_list)
          let pro_list = new_pro_list
          this.setState({
            pro_list
          })
        })
      }
      // console.log(this.state.pro_list)

    })
    //----pro---
    // 滚动懒加载开始
    var that = this
    var newPage = 1
    var newArr = []
    window.addEventListener("scroll", function fn(e) {
      let htmlElement = e.target;
      // 1. 可以滚动的高度
      let scrollHeight = htmlElement.scrollHeight;
      // 2. 已经滚动的距离
      let scrollTop = htmlElement.scrollTop;
      // 3. 容器的高度
      let clientHeight = htmlElement.clientHeight;
      if (scrollHeight - scrollTop <= clientHeight + 1) {
        newPage++
        // if (newPage <= 5) {
        // console.log(newPage)
        axios.get("/topic/v1/find/recAuto.json?page=" + newPage + "&size=5&exceptIds=").then(res => {
          // console.log(newPage)
          // console.log(res)
          if (res.data.data) {
            var new_pro_list = []
            res.data.data.result.forEach((v, i) => {
              // if (v.topics) {
              v.topics.forEach((v, i) => {
                if (v.buyNow) {
                  new_pro_list.push(v)
                }
              })
              // console.log(new_pro_list)

              newArr = [...that.state.pro_list, ...new_pro_list]
              // console.log(newArr)
              that.setState({
                pro_list: newArr
              })
            })
            // console.log(that.state.pro_list)
          }

        })
        // }
      }
    }, true)
    // 滚动懒加载结束

  }
  goTopBtnClickHandler = (params) => {
    console.log("点击回到顶部");
    let con = document.getElementsByClassName('goodsLeft')[0]
    var timer = setInterval(() => {
      con.scrollTop -= 300
      if (con.scrollTop < 300) {
        con.scrollTop = 0
        clearInterval(timer)
      }
    }, 16)
  }
  // 数据请求 监听器 注册事件 去掉
  componentWillUnmount() {
    window.removeEventListener("scroll", this.fn)
  }
  
  goTopBtnClickHandler() {
    console.log("点击回到顶部");
    const con = document.getElementsByClassName('goodsBox')[0]
    var timer = setInterval(() => {
      con.scrollTop -= 300
      if (con.scrollTop < 300) {
        con.scrollTop = 0
        clearInterval(timer)
      }
    }, 16)
  }

  render() {
    return (
      <div className={styles.topic}>
        {/* 商品瀑布流开始 */}
        <div className={styles.goodsBox} ref={(goodsList) => this.goodsList = goodsList}>
          <div className={styles.goodsList}>
            <div className={styles.goodsLeft}>
              {
                this.state.pro_list.map((v, i) => {
                  if (v.buyNow) {
                    return <div key={i} className={styles.goods} onClick={() => {
                      // this.props.history.push("/ProductDetail/?id=" + v.buyNow.itemId)

                    }}>
                      <img src={v.picUrl} alt="" />
                      <span className={styles.goodsTitle}>{v.title}</span>
                      <div className={styles.goodsUser}>
                        <div className={styles.userImg}>
                          {/* <img src={v.avatar} alt="" /> */}
                          <span>{"Devil"}</span>
                        </div>
                        <div className={styles.userLook}>
                          <img alt="" src="" />
                          <span>{v.readCount}</span>
                        </div>
                      </div>
                    </div>
                  } else {
                    return null
                  }
                }
                )
              }
            </div>
          </div>
        </div>
        {/* 商品瀑布流结束 */}
        {/* 回到顶部开始 */}
        {/* <i onClick={this.goTopBtnClickHandler} className={styles.goToTop}></i> */}
        {/* 回到顶部结束 */}
      </div>
    )
  }
}